<template>
    <z-paging ref="paging" v-model="list" @query="queryList">
        <template #top>
            <me-tabs v-model="current" :tabs="tabs" @change="tabChange" :height="88"></me-tabs>
            <view class="bg">
                <view class="search-bar">
                    <u-field icon="search" placeholder="请输入想搜索的商品名称、退款编号" :border-bottom="false" label-width="30" :clearable="false" @confirm="search"></u-field>
                </view>
            </view>
        </template>
        <view v-for="(item, idx) in list" :key="'cf-order-skus' + idx" @click="orderDetail(item)" class="order-cards">
            <cf-order-skus :order="item" name="退款编号" :fontSize="24" text="退款金额" class="cf-order-skus">
                <template #status>
                    <view class="u-flex">
                        <view class="u-flex">
                            <u-image :src="item.type == 0 ? '/static/icon/10057.png' : '/static/icon/10056.png'" width="40" height="40"></u-image>
                            <text class="u-margin-left-10 u-font-24">{{ item.statusName }}</text>
                        </view>
                    </view>
                </template>

                <template #bottom>
                    <view class="u-flex u-row-between"> </view>
                    <view class="slot-btns">
                        <view class="expired o-font-color-error" v-if="item.refoundStatus != 0">
                            {{ item.refoundStatusText }}
                        </view>
                        <u-button type="p" :disabled="item.expired" v-if="item.refoundStatus == 0" @click="applyRefound">申请售后 </u-button>
                    </view>
                </template>
            </cf-order-skus>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'

const list = ref<any[]>([])

const current = ref(0)

let index = 1

const tabs = ref([{ name: '退款中' }, { name: '申请记录' }])

const paging = ref<any>(null)

let keyword = ''

const userStore = useUserStore()

function tabChange(e: number) {
    index = e + 1
    paging.value.reload()
}

function queryList(pageNo: number) {
    uni.$u.$api.OrderApi.queryOrderRefundLog({
        current: pageNo,
        logType: index,
        merchantId: userStore.userInfo.merchantId,
        search: keyword
    })
        .then((res: any) => {
            // 数据过滤条件
            // if (pageNo == 1) list.value = []
            res.records.forEach((item: any) => {
                item.aftersalesId = item.id
                item.id = item.orderRefundNo // 退货编号
                item.payPrice = item.refundTotalAmount
                let totalNum = 0
                item.skus.forEach((m: any) => {
                    m.uuid = uni.$u.guid(6)
                    m.detail.forEach((v: any) => {
                        v.uuid = uni.$u.guid(7)
                        v.price = v.singlePrice
                        totalNum += v.num
                    })
                })
                item.totalNum = totalNum
            })
            // list.value = list.value.concat(res.records)

            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

function search(v: string) {
    keyword = v
    paging.value?.reload()
    uni.hideKeyboard()
}

function orderDetail(item: any) {
    let { type } = item
    let id = item.aftersalesId
    if (type === 1) {
        // 退货退款
        uni.$u.$MRouter.SALESRD.to({ id })
    } else {
        // 仅退款
        uni.$u.$MRouter.refundDetail.to({ id })
    }
}

function applyRefound(){}
</script>

<style scoped lang="scss">
    page{
        background: #F8F8F8;
    }
    .holder {
        height: calc(88rpx + 140rpx);
    }

    .bg {
        background-color: $uni-bg-color;
        width: 100%;
        height: 140rpx;

        /* #ifdef H5 */
        top: calc(44px + 88rpx);
        /* #endif */

        /* #ifdef APP-PLUS */
        top: 88rpx;
        /* #endif */

        left: 0;
        z-index: 9;
    }

    .search-bar {
        margin: 20rpx;
        border: 2rpx solid rgba(255, 36, 66, 0.7);
        box-shadow: 0px 5rpx 16rpx 0rpx rgba(128, 129, 129, 0.5);
        background: #ffffff;
        border-radius: 38rpx;
    }
    .order-cards {
        padding: 0 30rpx;
        .cf-order-skus {
            border-radius: 10rpx;
            position: relative;
        }
    }
</style>
